Prevenir CORS

Como configurar angular para prevenir el bloqueo por CORS al hacer solicitudes cruzadas

Para prevenir que se bloqueen solicitudes CORS lo haremos utilizando el proxy de angular.

Primero tenemos que añadir un archivo proxy.config.json en la raiz del proyecto, con el siguiente contenido:

{
  "/api/*":{
      "target": "http://127.0.0.1:8080",
      "secure":false,
      "logLevel":"debug"
  }
}

El target que se indica en la configuración es la dirección a la que nos queremos conectar

Despues en el archivo angular.json ponemos la siguiente configuración en el apartado serve:

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
  "proxyConfig": "proxy.config.json"
},

Una vez tenemos esto ya podemos utilizar las conexiones sin problemas de CORS solo que a la hora de hacer las conexiones solo tenemos que indicar el Endpoint sin indicar la direccion del servidor, ya que esta dirección se indica en el archivo de proxy.config.json:

En este caso nos conectamos al endpoint /api/members y el servidor es el que ya indicamos en el proxy.config.json en este caso 127.0.0.1:8080

NOTA: si utilizamos la direccion http://127.0.0.1:8080/api/members no utilizariamos el proxy de angular y no estaríamos preveniendo el bloqueo del CORS

ngIf | Hidden | Angular